<template>
  <div class="analysis">
    <header>
      <p>单号码查询</p>
    </header>
    <div class="box-header">
      <el-form
        :model="formData"
        inline
        label-position="right"
        label-width="80px"
      >
        <el-form-item label="号码">
          <el-input v-model="formData.codeNbr" clearable size="mini"></el-input>
        </el-form-item>

        <el-form-item label="年度">
          <el-date-picker
            size="mini"
            value-format="yyyy"
            v-model="formData.acctMonth"
            type="year"
            placeholder="选择年"
            :picker-options="endDateDisabled"
            :clearable="false"
          ></el-date-picker>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="search" size="mini">查询</el-button>
          <el-button type="primary" @click="handle_export" size="mini">导出</el-button>
        </el-form-item>
      </el-form>
      <div class="options">
        <span>选项</span>
        <el-checkbox-group v-model="checkboxGroup" size="medium">
          <el-checkbox-button
            v-for="(val,key) in optionsData"
            :key="key"
            :label="key"
            >{{ val }}</el-checkbox-button
          >
        </el-checkbox-group>
      </div>

      <div class="prom-name">
        <span>主套餐：{{ tableData.length ? tableData[0].promName : "" }}</span>
        <span
          >发展人：{{
            tableData.length ? tableData[0].mktEmployeeId : ""
          }}</span
        >
      </div>
    </div>
    <div class="box-body">
      <el-table
        v-loading="tableLoading"
        :data="tableData"
        style="width: 100%"
        border
        :header-cell-style="{
          background: 'rgb(237,241,246)',
          color: 'rgb(95,98,102)',
          border: '1px solid #ddd'
        }"
      >
        <el-table-column label="号码" prop="accsNbr" min-width="120" align="center"></el-table-column>
        <el-table-column label="来源" prop="incomeSource" min-width="80" align="center"></el-table-column>
        <el-table-column
          align="center"
          v-for="month in monthList"
          :key="month"
          :label="formData.acctMonth + (month < 10 ? '0' + month : month)"
        >
        <el-table-column
          align="center"
          :label="areaList[`value${month}`]"
        >
          <el-table-column
            v-for="item in column"
            :key="item"
            :label="optionsData[item]"
            :prop="`${item}value${month}`"
            align="center"
          ></el-table-column>
        </el-table-column>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
import prefixAPI from "@/api/prefixAPI";
import { getCookie } from "@/common/js/cookie";
import { $budgetAPI } from "@/api";
import qs from 'qs';
const url = prefixAPI.pack;
export default {
  name: "analysis",
  data() {
    return {
      formData: {
        acctMonth: new Date().getFullYear().toString(),
        codeNbr: "",
      },
      optionsData: {
         zy: "主营" ,
         mh: "码号" ,
         tj: "码号台阶" ,
         zh: "产数台阶" ,
         dd: "大单" ,
         cs: "产数" ,
      },
      checkboxGroup: [],//选中的选项
      column: [],//表格中主营、码号等字段
      endDateDisabled: this.pickerDisabled(),
      disabledTime: new Date().getFullYear(),
      tableData: [],
      tableLoading: false,
      monthList: [],//表格中月份字段
      areaList: {},//表格中area
    };
  },
  methods: {
    pickerDisabled() {
      let e = this;
      return {
        disabledDate: function (t) {
          if (e.disabledTime) {
            var n = t.getFullYear();
            if (n.toString() > e.disabledTime) {
              return !0;
            }
          }
        },
      };
    },
    //查询
    search() {
      if(!this.formData.codeNbr){
        this.$message.warning("请输入号码");
        return;
      }
      if(this.checkboxGroup.length == 0){
        this.$message.warning("请选择选项");
        return;
      }
      this.getTableData();
    },
    //导出
    handle_export() {
      if(!this.formData.codeNbr){
        this.$message.warning("请输入号码");
        return;
      }
      if(this.checkboxGroup.length == 0){
        this.$message.warning("请选择选项");
        return;
      }
      let data = Object.assign({}, this.formData);
      this.checkboxGroup.forEach((it) => {
        data[it] = 1;
      });
      
      let params = {...this.formData, token: getCookie("token")};
      // $budgetAPI.exportSingleCode(params, res => {
        // console.log(res);
      // });
      window.open(
        `${url}/singleCode/export?${qs.stringify(params)}`,
        "_self"
      );
      // let fileName =
        // "单号码收入_" 
        // + data.codeNbr 
        // + ".xlsx";
      // downLoadExcelParams("/singleCode/export", data, fileName);
    },
    async getTableData() {
      this.tableLoading = true;
      let data = {...this.formData, token: getCookie("token")}
      this.checkboxGroup.forEach((it) => {
        data[it] = 1;
      });
      $budgetAPI.getSingleCode(data, res => {
        if(res.code == 0){
          //表格月份数据
          this.monthList = [];
          if (res.content.data.length > 0) {
            for (let i = 1; i <= 12; i++) {
              for (let j = 0; j < res.content.data.length; j++) {
                if (
                  res.content.data[j][`csvalue${i}`] != undefined ||
                  res.content.data[j][`ddvalue${i}`] != undefined ||
                  res.content.data[j][`tjvalue${i}`] != undefined ||
                  res.content.data[j][`zhvalue${i}`] != undefined ||
                  res.content.data[j][`zyvalue${i}`] != undefined ||
                  res.content.data[j][`mhvalue${i}`] != undefined
                ) {
                  this.monthList.push(i);
                  break;
                }
              }
            }
          }
          this.tableData = res.content.data;
          this.areaList = res.content.area;
          this.column = this.checkboxGroup.concat([]);
        }
      })
      this.tableLoading = false;
    },
  },
};
</script>

<style lang="scss" scoped>
.analysis {
  width: 100%;
  height: 100%;
  > header {
    font-size: 16px;
    margin-bottom: 10px;
  }
  .options {
    padding-left: 38px;
    > span {
      font-size: 14px;
      // font-weight: 600;
      color: #606266;
    }
    .el-checkbox-group {
      display: inline-block;
      margin-left: 10px;
    }
  }
  .prom-name {
    margin: 20px 0;
    font-size: 16px;
    > span:nth-child(1) {
      margin-right: 100px;
    }
  }
}
</style>
